<template>
  <!-- 顶部操作栏 -->
  <div class="topTool">
    <!-- 输入 & 选择框：1.用户ID  2.手机号 -->
    <div class="mt-4">
      <el-input
          v-model="input"
          placeholder="搜索内容"
          class="input-with-select"
      >
        <template #prepend>
          <el-select v-model="select" placeholder="搜索方式" style="width: 115px;">
            <el-option label="用户ID" value="1" />
            <el-option label="手机号" value="2" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" style="width: 50px" @click="handleSearch"/>
        </template>
      </el-input>
    </div>
  </div>
  <!-- el-table数据表格组件 -->
  <el-table
      :data="userData"
      :header-cell-style="{ background: 'rgb(245,247,250)'}"
      empty-text="暂无数据"
      style="margin-top: 20px;width: 100%;"
      border
  >
    <!-- 基本信息 -->
    <!-- 用户ID -->
    <el-table-column prop="id" label="用户ID" sortable width="200px"></el-table-column>
    <!-- 网站昵称 -->
    <el-table-column prop="userNick" label="昵称" width="150px"></el-table-column>
    <!--  用户头像  -->
    <el-table-column prop="headImage" label="用户头像" width="90px">
      <template #default="scope">
        <img v-show="scope.row.headImage!==null" :src="scope.row.headImage" style="width: 65px;height: 65px">
      </template>
    </el-table-column>
    <!-- 姓名 -->
    <el-table-column prop="name" label="姓名" width="100px"></el-table-column>
    <!-- 性别 -->
    <el-table-column prop="gender" label="性别" width="70px">
      <template #default="scope">
        {{ scope.row.gender }}
      </template>
    </el-table-column>
    <!-- 出生日期 -->
    <el-table-column
        prop="birth"
        label="出生日期"
        sortable
        width="110px"
        :formatter="formatTime"
    ></el-table-column>
    <!-- 手机号 -->
    <el-table-column prop="phone" label="手机号" width="120px"></el-table-column>
    <!-- 邮箱 -->
    <el-table-column prop="email" label="邮箱" width="180px"></el-table-column>
    <!-- 通讯地址 -->
    <el-table-column prop="address" label="通讯地址" width="200px"></el-table-column>
    <!-- 身份证号 -->
    <el-table-column prop="idCard" label="身份证号" width="180px"></el-table-column>
    <!-- 身份 -->
    <el-table-column prop="status" label="身份" width="120px"></el-table-column>
    <!-- 操作：1.查看简历信息 -->
    <el-table-column label="操作" width="137px" fixed="right">
      <template #default="{ row }">
        <el-button size="small" :icon="Search" @click="handleViewDetails(row)">查看简历信息</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <el-pagination
      background
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      style="margin-top: 5px"
  />
  <!-- 查看信息 -->
  <!-- 简历信息 -->
  <el-dialog v-model="dialogFormVisible1" title="简历信息" style="width: 1040px;" draggable>
    <table>
      <tbody>
        <tr><th colspan="21">基本信息</th></tr>
        <tr>
          <th>姓名</th><td colspan="2">{{ tableform1.name }}</td>
          <th>出生日期</th><td colspan="2">{{ tableform2.birth }}</td>
          <th>性别</th><td>{{ tableform1.gender }}</td>
          <td rowspan="5" class="photo" colspan="4">
            <div v-if="havePhoto"><img :src="tableform2.userImage" style="height: 100%;margin-top: 5px"></div>
            <div v-else>无</div>
          </td>
        </tr>
        <tr>
          <th>手机号</th><td colspan="2">{{ tableform1.phone }}</td>
          <th>身份证号</th><td colspan="2">{{ tableform1.idCard }}</td>
          <th>政治面貌</th><td>{{ tableform2.politicalStatus }}</td>
        </tr>
        <tr>
          <th>邮箱</th><td colspan="2">{{ tableform1.email }}</td>
          <th>毕业院校</th><td colspan="2">{{ tableform2.graduateSchool }}</td>
          <th>学历</th><td>{{ tableform2.eduBackground }}</td>
        </tr>
        <tr>
          <th>所学专业</th><td colspan="2">{{ tableform2.major }}</td>
          <th>期望职位</th><td  colspan="2">{{ tableform2.expectPosition }}</td>
          <th>期望薪资</th><td>{{ tableform2.expectSalary }}</td>
        </tr>
        <tr>
          <th>个人技能</th><td colspan="5">{{ tableform2.skill }}</td>
          <th>毕业时间</th><td>{{ tableform2.graduateTime }}</td>
        </tr>
        <tr><th colspan="21">获奖记录</th></tr>
        <tr><td colspan="21">{{ tableform2.rewards }}</td></tr>
        <tr><th colspan="21">工作经验</th></tr>
        <tr><td colspan="21">{{ tableform2.workExperience }}</td></tr>
        <tr><th colspan="21">自我介绍</th></tr>
        <tr><td colspan="21">{{ tableform2.introduce }}</td></tr>
      </tbody>
    </table>
  </el-dialog>
</template>

<script setup>
import {Search} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {adminApi} from "../../api/app";

// 在组件挂载后执行回调函数
onMounted(() => {
  getData()
})

// 格式化日期
const formatTime = (row) => {
  if(row.birth == null) return null;
  const date = new Date(row.birth);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}
const formatTime1 = (row) => {
  if(row == null) return null;
  const date = new Date(row);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}
//定义用户信息数据
const userData = ref([]);
const currentPage = ref(1);//定义当前页码
const pageSize = ref(5);//定义每页显示记录数
const total = ref(0);//总记录数
//获取当前页数据
const getData = () => {
  adminApi.getAllSeeker({
    size: pageSize.value,
    page: currentPage.value
  }).then(response => {
    userData.value = response.data;
    console.log(response.data);
    total.value = response.total;
  }).catch(error => {
    console.error(error);
  })
};
//处理页码变化点击事件
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  // getData();
};

const input = ref(''); // 搜索框输入信息
const select = ref(''); // 搜索方式选择栏信息
// 处理搜索
const handleSearch = () => {
  if (input.value.length > 0) { // 输入框有内容，根据内容查询数据
    if(select.value === '1') { // 用户ID
      adminApi.searchSeekerById({
        id: input.value
      }).then(response => {
        console.log(response);
        userData.value = [];
        userData.value.push(response.data);
        total.value = response.total;
      }).catch(error => {
        console.error(error);
      })
    } else if(select.value === '2') { // 手机号
      adminApi.searchSeekerByPhone({
        phone: input.value
      }).then(response => {
        userData.value = [];
        userData.value.push(response.data);
        total.value = response.total;
      }).catch(error => {
        console.error(error);
      })
    }
  } else { // 输入框无内容，显示所有数据
    getData()
  }
}

// 简历信息
const dialogFormVisible1 = ref(false) // 设置弹窗默认不显示
const tableform1 = ref({}); // 基本信息
const tableform2 = ref({}); // 简历信息
const havePhoto = ref(true); // 有无照片
// 处理查看简历信息按钮点击事件
const handleViewDetails = (row) => {
  // 获取此人简历信息
  adminApi.getSeekerVitae({
    userId: row.id
  }).then(response => {
    tableform2.value = response.data[0];
    tableform2.value.graduateTime = formatTime1(tableform2.value.graduateTime);
    tableform2.value.birth = formatTime1(tableform2.value.birth);
    console.log(tableform2.value)
    if(tableform2.value.userImage == null) {
      console.log(1);
      havePhoto.value = false;
    }
    tableform1.value = {...row};
    // 打开弹窗
    dialogFormVisible1.value = true;
  }).catch(error => {
    console.error(error);
  })
}
</script>

<style scoped>
.topTool {
  display: flex;
  justify-content: space-between; /* 元素沿着主轴均匀分布 */
  align-items: center; /* 元素在交叉轴上居中对齐 */
  z-index: 0;
  position: relative;
}
.topTool .mt-4 {
  flex: 1; /* 让这个元素占据剩余空间 */
}
table {
  width: 1000px;
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.photo {
  height:180px;
  text-align: center;
}
th,td {
  height: 40px;
  width: 100px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}
th {
  background-color: rgba(198, 226, 255, 0.35);
}
td {
  padding-left: 5px;
}
p {
  margin-top: 5px;
}
</style>
